import { Input, Space, Table,Modal,Button } from 'antd';
import React, { useEffect,useState } from "react";
import { inject, observer } from 'mobx-react';
// import MyPage from './../common/MyPagination.jsx';
import Detail from './detailInfo';
import './../../assets/css/knowledge/common.css'




const AllList = (props) => {

  //详情的模态框
  const [isModalVisible, setIsModalVisible] = useState(false);
  const showModal = () => {
    setIsModalVisible(true);
  };
  const handleOk = () => {
    setIsModalVisible(false);
  };
  const handleCancel = () => {
    setIsModalVisible(false);
  };
  const columns = [
    {
      title: '分类',
      dataIndex: 'sort',
      key:'sort',
    },
    {
      title: '标题',
      dataIndex: 'title',
      key:'title',
      // render: (text) => <span className='knowledgeA' onClick={ToDetail}>{text}</span>
      render: (text, record) => { 
        return (
          <span styles={{cursor:'pointer'}} className='knowledgeA' onClick={() => ToDetail(record)}>{text}</span>
          // <Space size="middle">
          //   <button className='BtnUpdate' onClick={()=>update(record)}>修改</button>
          //   <button className='BtnDel' onClick={() => delect(record)} >删除</button>
          // </Space>
        )
      },
    },
    {
      title: '内容概要',
      dataIndex: 'outline',
      key:'outline',
    },
    {
      title: '发布人',
      dataIndex: 'user_name',
      key:'user_name',
    },
    {
      title: '发布时间',
      dataIndex: 'pubdate',
      key:'pubdate',
    },
    {
      title: '管理',
      key: 'action',
      render: (_, record) => { 
        return (
          <Space size="middle">
            <button className='BtnUpdate' onClick={()=>update(record)}>修改</button>
            <button className='BtnDel' onClick={() => delect(record)} >删除</button>
          </Space>
        )
      }
    }
  ];
  const data = [
    {
      key: '1',
      sort: '销售话术',
      title: '666',
      outline: '1234天天开心',
      user_name: '钱多多',
      pubdate:'2022-8-8'
    },
    {
      key: '2',
      sort: '行业分析',
      title: '哈哈哈',
      outline: '快快乐乐哈哈哈哈哈哈哈哈',
      user_name: '王多鱼',
      pubdate:'2022-8-8'
    },
    {
      key: '3',
      sort: '销售话术',
      title: '哈哈哈',
      outline: '1234',
      user_name: '小王',
      pubdate:'2022-8-8'
    },
    {
      key: '4',
      sort: '销售话术',
      title: '哈哈哈',
      outline: '1234😊快乐呀 o(*￣▽￣*)ブ',
      user_name: '李四',
      pubdate:'2022-8-8'
    },
    {
      key: '5',
      sort: '行业分析',
      title: '哈哈',
      outline: '早睡早起',
      user_name: '小四',
      pubdate:'2022-8-8'
    }
  ]
  //编辑
  const update = (record) => { 
   const value=record;
    console.log('updateValue',value.outline)
  }

  //删除
  const delect=(record) => { 
    let id = record.k_id;
    console.log('id', id);
    props.knowledgeStore.delListData({ currentPage: 1, pageSize: 10, k_id: id }).then(() => {
      props.knowledgeStore.getAllListData({ currentPage: 1, pageSize: 20 });
    })
  }

   //获取查询input框的值
  const [resInput, setResInput] = useState('')
  const { Search } = Input;
  const OnSearch = (value) => {
    setResInput(value)
  };
  const ToDetail = (record) => {
    props.knowledgeStore.addInfo = record
    showModal();
    console.log( props.knowledgeStore.addInfo);
   }

  useEffect(() => {
    if (resInput === '') {
      props.knowledgeStore.getAllListData({ currentPage: 1, pageSize: 20 });
    } else { 
      props.knowledgeStore.getSearchListData({ currentPage: 1, pageSize: 10, title: resInput });
    }
  }, [resInput]);

 

  return(
    <div id='AllListBox'>
      <div className='knoweledgeSearch'>
        快速搜索：
        <Space direction="horizontal" >
          <Search 
            placeholder="关键词"
            allowClear
            enterButton="Search"
            onSearch={OnSearch}
            spellCheck='false'
          />
        </Space>
      </div>
      <Table 
          //  rowSelection={{
          //   ...rowSelection,
          // }}        
          columns={columns}
          // dataSource={props.knowledgeStore.data}
          dataSource={data}
          // pagination={false}
          whiteSpace='pre-wrap'
      />
      <Modal id='AllListModal' width={1000} height={600} title="查看知识" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}
        footer={[
          <Button key="back" onClick={handleCancel} id='DetailCloseBtn'>
            关闭
          </Button>
        ]}
      >
        <Detail/>
      </Modal>
      {/* <MyPage/> */}
    </div>
  );
} 

export default inject('knowledgeStore')(observer(AllList)) ;